<template>
  <div class="rule-item-css" v-if="isShow||!ruleItem.connectId">
    <div v-text="ruleItem.textBefore"></div>
    <el-tooltip :open-delay="1000"
                v-if="ruleItem.textBefore === 'In this service board:'"
                :content="$('custom.component.nextTicketRender.content')"
                placement="top">
      <el-select v-model="params[ruleItem.fields]"
                 placeholder=""
                 size="mini"
                 multiple
                 clearable
                 filterable
                 default-first-option
                 collapse-tags
                 v-loading="loading"
                 element-loading-spinner="el-icon-loading"
                 @change="selectchange"
                 :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
                 class="select-box">
        <el-option label="Select All" value="Select All" style="text-align: center"></el-option>
        <el-option v-for="(o,ii) in sort(selectDataObj[`${ruleItem.fields}ListsOrigin`],ruleItem.selectLabel)"
                   :key="ii"
                   :value="o[ruleItem.selectValue]"
                   :label="o[ruleItem.selectLabel]"></el-option>
      </el-select>
    </el-tooltip>

    <el-select v-else-if="isMultiple"
               v-model="params[ruleItem.fields]"
               placeholder=""
               size="mini"
               clearable
               filterable
               default-first-option
               v-loading="loading"
               element-loading-spinner="el-icon-loading"
               @change="selectchange"
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(o,ii) in sort(selectDataObj[`${ruleItem.fields}ListsOrigin`],ruleItem.selectLabel)"
                 :key="ii"
                 :value="o[ruleItem.selectValue]+''"
                 :label="o[ruleItem.selectLabel]"></el-option>
    </el-select>
    <el-select v-else
               v-model="params[ruleItem.fields]"
               :key="typeSelectApiValue"
               placeholder=""
               size="mini"
               multiple
               clearable
               filterable
               default-first-option
               v-loading="loading"
               element-loading-spinner="el-icon-loading"
               collapse-tags
               @change="selectchange"
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option label="Select All" value="Select All" style="text-align: center"></el-option>
      <el-option v-for="(o,ii) in sort(selectDataObj[`${ruleItem.fields}ListsOrigin`],ruleItem.selectLabel)"
                 :key="ii"
                 :value="o[ruleItem.selectValue]"
                 :label="o[ruleItem.selectLabel]"></el-option>
    </el-select>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'
import { Cascader } from './cascader.js'
export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      typeSelectApiValue: '',
      isMultiple: false,
      isShow: false
    }
  },
  props: {
    currIndex: {
      type: Number
    }
  },
  created () {
    try {
      if (!this.ruleItem.connectId) {
        if (this.params[this.ruleItem.fields] && !Array.isArray(this.params[this.ruleItem.fields])) {
          this.params[this.ruleItem.fields] = [this.params[this.ruleItem.fields]]
        }
      }

      Cascader.$on(`connect-${this.ruleItem.connectId}-${this.currIndex}`, (data, isInt) => {
        let _self = this
        _self.isShow = true
        _self.typeSelectApiValue = data
        if (data === '!=' || data === '=') {
          _self.isMultiple = true
        } else {
          _self.isMultiple = false
        }
        if (isInt) {
          if (data === '!=' || data === '=') {
            _self.params[_self.ruleItem.fields] = ''
          } else if (data === 'in' || data === 'not in') {
            _self.params[_self.ruleItem.fields] = []
          }
        }
      })
    } catch (error) {

    }
  },
  mounted () {
  },
  methods: {
    sort (val, o) {
      val = this._.cloneDeep(val)
      if (val) {
        var temp = val.sort(function (a, b) {
          return a[o].localeCompare(b[o])
        })
        return temp
      }
    },
    selectchange (val) {
      if (val instanceof Array) {
        const selectOption = this.sort(this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`], this.ruleItem.selectLabel)
        const allValue = selectOption.map(item => item[this.ruleItem.selectValue])
        if (val.includes('Select All') && val.length - 1 === selectOption.length) {
          this.params[this.ruleItem.fields] = []
        } else {
          if (val.includes('Select All')) {
            this.params[this.ruleItem.fields] = allValue
          } else {}
        }
      }
      this.$forceUpdate()
    }
  },
  destroyed () {
    Cascader.$off(`connect-${this.ruleItem.connectId}-${this.currIndex}`)
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
::v-deep .el-loading-spinner {
  top: 66%;
  left: 20px;
  text-align: left;
}
</style>
